<template>
	<view>
		<!-- 用户名模块 -->
		<view class="user_id box"><input type="number" placeholder="请输入用户名" v-model="telephone" disabled=""/></view>
		<!-- 输入旧密码 -->
		<view class="oldpasswprd box">
			<input type="text" :password="oldPasswordShow" placeholder="请输入旧密码" v-model="oldPassword"/>
			<image src="../../static/start/open_eye.png" mode="aspectFill" v-if="!oldPasswordShow" @tap="oldPasswordShow=true"></image>
			<image src="../../static/start/close_eye.png" mode="aspectFill" v-if="oldPasswordShow" @tap="oldPasswordShow=false"></image>
		</view>
		<!-- 输入新密码 -->
		<view class="newpassword box">
			<input type="text" :password="newPasswordShow" placeholder="请输入新密码" v-model="newPassword"/>
			<image src="../../static/start/open_eye.png" mode="aspectFill" v-if="!newPasswordShow" @tap="newPasswordShow=true"></image>
			<image src="../../static/start/close_eye.png" mode="aspectFill" v-if="newPasswordShow" @tap="newPasswordShow=false"></image>
		</view>
		<!-- 确认密码 -->
		<view class="confirm box">
			<input type="text" :password="newPassword02Show" placeholder="请确认新密码" v-model="newPassword02"/>
			<image src="../../static/start/open_eye.png" mode="aspectFill" v-if="!newPassword02Show" @tap="newPassword02Show=true"></image>
			<image src="../../static/start/close_eye.png" mode="aspectFill" v-if="newPassword02Show" @tap="newPassword02Show=false"></image>
		</view>
		<view class="changepassword"><button type="primary" @tap="passwordUpdate">修改密码</button></view>
	</view>
</template>

<script>
import md5 from '../../common/md5.min.js'
export default {
	data() {
		return {
			telephone:uni.getStorageSync('telephone'),
			oldPassword:'',
			newPassword:'',
			newPassword02:'',
			oldPasswordShow:false,
			newPasswordShow:false,
			newPassword02Show:false
		};
	},
	methods: {
		passwordUpdate(){
			const {oldPassword,newPassword,newPassword02} = this
			if(oldPassword==''){
				this.$sToast('旧密码不能为空')
				return
			}
			if(newPassword==''){
				this.$sToast('新密码不能为空')
				return
			}
			if(newPassword!=newPassword02){
				this.$sToast('两次密码不一致')
				return
			}
			this.$ajax(
				this.apiList.passwordUpdate,
				{
					areaCode:86,
					oldPassword:md5(this.oldPassword),
					newPassword:md5(this.newPassword),
					telephone:this.telephone
				},
				'GET'
			).then(res => {
				this.$sToast('修改成功');
				uni.clearStorageSync()
				this.$open('../start/login',2,1500)
			});
		}
	}
};
</script>

<style>
.box {
	background: #ffffff;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}
.user_id {
	width: 750rpx;
	height: 104rpx;
	line-height: 104rpx;
}

.user_id input {
	padding-left: 31rpx;
	flex: 1;
}

.oldpasswprd {
	display: flex;
	width: 750rpx;
	height: 104rpx;
}

.oldpasswprd input {
	padding-left: 31rpx;
	flex: 1;
}

.oldpasswprd image {
	padding-right: 30rpx;
	width: 40rpx;
	height: 26rpx;
}

.newpassword {
	display: flex;
	width: 750rpx;
	height: 104rpx;
}

.newpassword input {
	padding-left: 31rpx;
	flex: 1;
}

.newpassword image {
	padding-right: 30rpx;
	width: 40rpx;
	height: 26rpx;
}
.confirm {
	display: flex;
	width: 750rpx;
	height: 104rpx;
}

.confirm input {
	padding-left: 31rpx;
	flex: 1;
}

.confirm image {
	padding-right: 30rpx;
	width: 40rpx;
	height: 26rpx;
}


.changepassword button {
	width: 710rpx;
	height: 80rpx;
	line-height: 80rpx;
}
page {
	background: #f3f3f3;
}
</style>
